<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>动态数据</title>
		<link rel="stylesheet" href="assets/css/common.css">
		<link rel="stylesheet" href="assets/css/dynamicdata.css">
		<link rel="stylesheet" href="assets/layui/css/layui.css">
		<link rel="stylesheet" href="assets/css/reset-layui-style.css?v=33">
	</head>
	<body>
		<div class="main-page">
			<div class="page-body flex">
				<div class="sub-page-container">
					<div class="right-content-wrapper">
						<div class="right-content-box">
							<div class="cha">
								<img src="assets/img/item4.png">
							</div>
							<ul class="tags">
								<li>&lt;</li>
								<li>返回</li>
								<li> | </li>
								<li>有组织</li>
								<li>&gt;</li>
								<li>实时监测</li>
								<li>&gt;</li>
								<li>有组织排放清单</li>
								<li>&gt;</li>
								<li>动态数据</li>
							</ul>
							<div class="content-section flex page-paifang">
								<!-- 我的页面 -->
								<div class="main-section">
									<div class="card flex">
										<span class="card-span">废气治理设施基本情况</span>
										<ul class="navigation  flex">
											<li><div class="date-input day" id="dateBtn"><input type="text" id="date" autocomplete="off" placeholder="请输入查询日期"></div></li>
											<li class="navigation-1" onclick="location.href='实时监测.html'">基本信息</li>
											<li class="navigation-2" onclick="location.href='动态数据.html'">动态数据</li>
										</ul>
									</div>
									<!-- 中间内容部分 -->
									
									<div class="ec flex">
										<div class="ec1" id="region">

										</div>
										<div class="ec2"  id="region2">

										</div>
										<div class="ec3" id="region3">

										</div>
										<div class="platfrom dayup"></div>
										
									</div><div class="itme-p">生产设备</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		</div>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
		<script src="assets/js/jquery.SuperSlide.2.1.3.js"></script>
		<script src="assets/layui/layui.js"></script>
		<script src="assets/js/select.js"></script>
		<script src="assets/js/page.js"></script>
		<script src="assets/js/echarts.min.js"></script>
		<script>
			var pageObj = function(){
				this.init()
			}
			pageObj.prototype.init = function() {
				
				// 渲染左侧菜单树
				new LeftSiderMenu({
					el: ".sub-page-container",
					size: 10,
					curMenu: "排放清单",
					menus: [{
							href: "实时监测.html",
							text: "实时监测"
						},
						{
							href: "数据分析.html",
							text: "数据分析"
						},
						{
							href: "运行状态.html",
							text: "运行状态"
						},
						{
							href: "告警分析.html",
							text: "告警分析"
						},
				
					]
				});
				
				// 渲染底部菜单
				new Footer({
					el: ".main-page",
					curMenu: "有组织",
					size: 4,
					menus: [{
							href: "有组织.html",
							text: "有组织"
						},
						{
							href: "无组织.html",
							text: "无组织"
						},
						{
							href: "车辆出入.html",
							text: "清洁运输"
						},
						{
							href: "视频.html",
							text: "视频大厅"
						}
					]
				});
				
				layui.use(['laypage', 'laydate'], function(){
					let laypage = layui.laypage;
					let laydate = layui.laydate;
				
					laypage.render({
					    elem: 'pagination'
					    ,count: 20
					    ,layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'] 
					    ,jump: function(obj){
					      	console.log(obj)
					    }
				  	});
				
				  	laydate.render({
					    elem: '#dateBtn'
					    ,type: 'datetime'
					    ,done: function(value, date){
						    $("#date").val(value)
						}
					});
				})
				
				new SelectPlus({
					el: ".platfrom",
					data: [{
							value: "",
							text: "烟尘（mg/m³）"
						},
						{
							value: 1,
							text: "烟尘（1mg/m³）"
						},
						{
							value: 2,
							text: "烟尘（2mg/m³）"
						},
						{
							value: 3,
							text: "烟尘（3mg/m³）"
						}
					],
					done: function(row) {
						console.log(row);
					}
				})
				this.initChart1()
				this.initChart2();
				this.initChart3();
			}

			pageObj.prototype.initChart1 = function() {
				var regionChart=echarts.init(document.getElementById('region'));
				regionChart.setOption({
					color:['rgba(0, 252, 255, 1)'],
					tooltip: {
				        trigger: 'axis',
				        // axisPointer: {
				        //     lineStyle: {
				        //         color: {
				        //             type: 'linear',
				        //             x: 0,
				        //             y: 0,
				        //             x2: 0,
				        //             y2: 1,
				        //             colorStops: [{
				        //                 offset: 0,
				        //                 color: 'rgba(0, 255, 233,0)'
				        //             }, {
				        //                 offset: 0.5,
				        //                 color: 'rgba(255, 255, 255,1)',
				        //             }, {
				        //                 offset: 1,
				        //                 color: 'rgba(0, 255, 233,0)'
				        //             }],
				        //             global: false
				        //         }
				        //     },
				        // },
				    },
				    legend:{
				    	right:20,
				    	top:80,
						icon: "circle",
				    	textStyle:{
				    		color:"#fff"
				    	}
				    },
				    xAxis: {
				        type: 'category',
				        axisLabel:{
				        	color:"#8995CB"
				        },
				        axisTick:{
				        	show:false
				        },
				        axisLine:{
				        	lineStyle:{
				        		color:"rgba(1,171,220,0.2)"
				        	}
				        },
				        data: ['03-12', '03-13', '03-14', '03-15','03-16', '03-17']
				    },
				    yAxis: {
				    	name: '生产设备',
				    	type : 'value',
				    	nameTextStyle:{
				    		color:"rgba(125, 166, 239, 1)",
							lineHeight: 80,
							
				    	},
				    	axisLine:{
				        	show:false
				        },
				        axisTick:{
				        	show:false
				        },
			            axisLabel:{
				        	color:"#8995CB"
				        },
				        splitLine: {
				        	show: true,
							lineStyle:{
								color:"rgba(35, 63, 141, 1)"
							}
				        }
				    },
				    grid:{
				    	bottom:'5%',
				    	right:'5%',
				    	top:'20%'
					
				    },
				    series: [
				    	{ 
				    		name:"旋转雾化器电流测量", 
				    		data: [100, 300,250,50,150,200],type: 'line',
				    		smooth: true,
				    		symbolSize:0,
				    	}
				    ]
				}); 
			}
			
			// ec2
			pageObj.prototype.initChart2 = function() {
				var regionChart=echarts.init(document.getElementById('region2'));
				regionChart.setOption({
					color:['rgba(224, 93, 231, 1)'],
					tooltip: {
				        trigger: 'axis',
				        axisPointer: {
				            lineStyle: {
				                color: {
				                    type: 'linear',
				                    x: 0,
				                    y: 0,
				                    x2: 0,
				                    y2: 1,
				                    colorStops: [{
				                        offset: 0,
				                        color: 'rgba(0, 255, 233,0)'
				                    }, {
				                        offset: 0.5,
				                        color: 'rgba(255, 255, 255,1)',
				                    }, {
				                        offset: 1,
				                        color: 'rgba(0, 255, 233,0)'
				                    }],
				                    global: false
				                }
				            },
				        },
				    },
				    legend:{
				    	right:50,
				    	top:80,
						icon: "circle",
				    	textStyle:{
				    		color:"#fff"
				    	}
				    },
				    xAxis: {
				        type: 'category',
				        axisLabel:{
				        	color:"#8995CB"
				        },
				        axisTick:{
				        	show:false
				        },
				        axisLine:{
				        	lineStyle:{
				        		color:"rgba(1,171,220,0.2)"
				        	}
				        },
				        data: ['03-12', '03-13', '03-14', '03-15','03-16', '03-17']
				    },
				    yAxis: {
				    	name: '治理设备',
				    	type : 'value',
				    	nameTextStyle:{
				    		color:"rgba(125, 166, 239, 1)",
							lineHeight: 80,
				    	},
				    	axisLine:{
				        	show:false
				        },
				        axisTick:{
				        	show:false
				        },
			            axisLabel:{
				        	color:"#8995CB"
				        },
				        splitLine: {
				        	show: true,
							lineStyle:{
								color:"rgba(35, 63, 141, 1)"
							}
				        }
				    },
				    grid:{
				    	bottom:'5%',
				    	right:'10%',
				    	top:'20%',
				    },
				    series: [
				    	{ 
				    		name:"风机数据2#主抽风机电流", 
				    		data: [40, 0,20,10,30,40],type: 'line',
				    		smooth: true,
				    		symbolSize:0,
				    	}
				    ]
				}); 
			}
			
			// ec3
			pageObj.prototype.initChart3 = function() {
				var regionChart=echarts.init(document.getElementById('region3'));
				regionChart.setOption({
					color:['rgba(0, 113, 249, 1)'],
					tooltip: {
				        trigger: 'axis',
				        axisPointer: {
				            lineStyle: {
				                color: {
				                    type: 'linear',
				                    x: 0,
				                    y: 0,
				                    x2: 0,
				                    y2: 1,
				                    colorStops: [{
				                        offset: 0,
				                        color: 'rgba(0, 255, 233,0)'
				                    }, {
				                        offset: 0.5,
				                        color: 'rgba(255, 255, 255,1)',
				                    }, {
				                        offset: 1,
				                        color: 'rgba(0, 255, 233,0)'
				                    }],
				                    global: false
				                }
				            },
				        },
				    },
				    legend:{
				    	right:50,
				    	top:80,
						icon: "circle",
				    	textStyle:{
				    		color:"#fff"
				    	}
				    },
				    xAxis: {
				        type: 'category',
				        axisLabel:{
				        	color:"#8995CB"
				        },
				        axisTick:{
				        	show:false
				        },
				        axisLine:{
				        	lineStyle:{
				        		color:"rgba(1,171,220,0.2)"
				        	}
				        },
				        data: ['03-12', '03-13', '03-14', '03-15','03-16', '03-17']
				    },
				    yAxis: {
				    	name: '',
				    	type : 'value',
				    	nameTextStyle:{
				    		color:"rgba(125, 166, 239, 1)",
							lineHeight: 20,
							
				    	},
				    	axisLine:{
				        	show:false
				        },
				        axisTick:{
				        	show:false
				        },
			            axisLabel:{
				        	color:"#8995CB"
				        },
				        splitLine: {
				        	show: true,
							lineStyle:{
								color:"rgba(35, 63, 141, 1)"
							}
				        }
				    },
				    grid:{
				    	bottom:'5%',
				    	right:'10%',
						top:'20%',
						
				    },
				    series: [
				    	{ 
				    		name:"265m²烧结机头", 
				    		data: [5, 6,1,3,4,2],type: 'line',
				    		smooth: true,
				    		symbolSize:0,
				    	}
				    ]
				}); 
			}
			new pageObj();
			
		</script>
	</body>
</html>
